<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style media="screen">
    * {stroke:red}
    </style>
    <script>
    window.onload=function (){
      let oL1=document.getElementById('l1');

      oL1.onclick=function (){
        //alert(oL1.x1);
        //oL1.x1='200';

        //alert(oL1.getAttribute('x1'));
        oL1.setAttribute('x1', '200');
      };
    };
    </script>
  </head>
  <body>
    <svg width="800" height="600">
      <line x1="100" y1="100" x2="300" y2="300" style="stroke:red; stroke-width:20" id="l1"></line>
    </svg>
  </body>
</html>
